<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/root.css">
	<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jquery-mousewheel/jquery.mousewheel.min.js"></script>
    <script type="text/javascript">
    	$(function(){

    		// 定义当前应该切换到哪一个页面
    		var $nowIndex = 0;
    		var $len = $('.page').length;
    		var $height = $(window).height();

    		// 定义高度
    		$('.pages_warper').css({'height':$height-1});
    		$('.pages_warper_inner').css({'height':$height*$len});
    		$('.pages_warper_inner .page').css({'height':$height});

    		// 用于函数节流：降低滚动触发修改$nowIndex的频率
    		var timer = null

    		// 初始化第一页的动画效果
    		$(".pages_warper_inner .page").animate({
    			'opacity':1
    		},1000)

    		$(".pages_warper_inner .warper1 .left").animate({
    			'margin-left':'10%',
    		},1000)

    		$(".pages_warper_inner .warper1 .right p").animate({
    			'margin-left':'10%',
    		},1000)

    		// 事件委托，监听li点击事件，切换对应的page
    		$('ul').delegate("li","click",function(){

    			$(this).addClass('active').siblings().removeClass('active');

    			$nowIndex = $(this).index();

				// 滚动向上向下的动画效果
			    $(".pages_warper_inner").animate({
    				'margin-top':-$height*$nowIndex,
    			},1000,'swing');

    			pages_toggle(); // 切换page动画
    		})

    		$(window).mousewheel(function(event) {

    			clearTimeout(timer);

			    timer = setTimeout(function(){
			    	// 滚轮向上：event.deltaY = 1
				    // 滚轮向下：event.deltaY = -1
				    $nowIndex = $nowIndex - event.deltaY;

				    console.log($nowIndex);

				    // 一共只有5个页面，所以需要限制一下nowIndex 0 - 4
				    if ($nowIndex < 0) {
				    	$nowIndex = 0;
				    }

				    if ($nowIndex > ($len - 1)) {
				    	$nowIndex = ($len - 1);
				    }

				    // 滚动向上向下的动画效果
				    $(".pages_warper_inner").animate({
	    				'margin-top':-$height*$nowIndex,
	    			},1000,'swing');

				    // 设置ul的active属性
				    // alert($("ul li").length);
				    $("ul li").eq($nowIndex).addClass('active').siblings().removeClass('active');

				    pages_toggle(); // 执行切换page动画

			    },500)
			});

		    // 切换page动画的方法
		    function pages_toggle(){
				switch($nowIndex){
			        case 0: // page 1 的动画
			        	$(".pages_warper_inner .warper1 .left").css({
			        		'margin-left':0,
			        		'opacity':0
			        	});
			    		$(".pages_warper_inner .warper1 .left").animate({
			    			'margin-left':'10%',
			    			'opacity':1
			    		},2000)


			    		$(".pages_warper_inner .warper1 .right p").css({
			    			'margin-left':'50%',
			    			'opacity':0
			    		})
			    		$(".pages_warper_inner .warper1 .right p").animate({
			    			'margin-left':'10%',
			    			'opacity':1
			    		},2000)
			          	break;
			        case 1: // page 2 的动画
			          	$(".pages_warper_inner .warper2 .left").css({
			    			'margin-left':'0',
			    			'opacity':0
			    		})
			    		$(".pages_warper_inner .warper2 .left").animate({
			    			'margin-left':'5%',
			    			'opacity':1
			    		},2000)


			    		$(".pages_warper_inner .warper2 .right").css({
			    			'margin-right':'-50%',
			    			'opacity':0
			    		})
			    		$(".pages_warper_inner .warper2 .right").animate({
			    			'margin-right':0,
			    			'opacity':1
			    		},2000)

			          	break;
			         case 2: // page 3 的动画
			        	$(".pages_warper_inner .warper3 .left").css({
			        		'margin-left':0,
			        		'opacity':0
			        	});
			    		$(".pages_warper_inner .warper3 .left").animate({
			    			'margin-left':'20%',
			    			'opacity':1
			    		},2000)


			    		$(".pages_warper_inner .warper3 .right p").css({
			    			'margin-left':'50%',
			    			'opacity':0
			    		})
			    		$(".pages_warper_inner .warper3 .right p").animate({
			    			'margin-left':'10%',
			    			'opacity':1
			    		},2000)
			          	break;
			          case 3: // page 4 的动画
			          	$(".pages_warper_inner .warper4 .left").css({
			        		'margin-left':0,
			        		'opacity':0
			        	});
			    		$(".pages_warper_inner .warper4 .left").animate({
			    			'margin-left':'10%',
			    			'opacity':1
			    		},2000)


			    		$(".pages_warper_inner .warper4 .right p").css({
			    			'margin-left':'50%',
			    			'opacity':0
			    		})
			    		$(".pages_warper_inner .warper4 .right p").animate({
			    			'margin-left':'10%',
			    			'opacity':1
			    		},2000)
			          	break;
			          case 4: // page 5 的动画
						$(".pages_warper_inner .warper5 .center").css({
			        		'transform':"rotateZ(0deg)",
			        	});
			       		$(".pages_warper_inner .warper5 .center").css({
			        		'transform':"rotateZ(360deg)",
			        	});
			          	break;
			      }
		    }

    	})
    </script>
</head>
<body>
	<div class="pages_warper">
		<div class="pages_warper_inner">
			<div class="warper1 page">
				<div class="left"></div>
				<div class="right">
					<img src="images/nginx.png">
					<p>
						Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。
					</p>
				</div>
			</div>
			<div class="warper2 page">
				<div class="left">
					<p>
						性能测试是通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试。负载测试和压力测试都属于性能测试，两者可以结合进行。通过负载测试，确定在各种工作负载下系统的性能，目标是测试当负载逐渐增加时，系统各项性能指标的变化情况。压力测试是通过确定一个系统的瓶颈或者不能接受的性能点，来获得系统能提供的最大服务级别的测试。
					</p>
				</div>
				<div class="right">
				</div>
			</div>
			<div class="warper3 page">
				<div class="left"></div>
				<div class="right">
					<p>
						Django是一个开放源代码的Web应用框架，由Python写成。采用了MVC的框架模式，即模型M，视图V和控制器C。它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的，即是CMS（内容管理系统）软件。并于2005年7月在BSD许可证下发布。这套框架是以比利时的吉普赛爵士吉他手Django Reinhardt来命名的。
					</p>
				</div>
			</div>
			<div class="warper4 page">
				<div class="left"></div>
				<div class="right">
					<p>
						Locust是一款易于使用的分布式用户负载测试工具。它用于对网站（或其他系统）进行负载测试，并确定系统可以处理多少并发用户。
						这个想法是，在测试期间，一群蝗虫 会攻击你的网站。您定义了每个蝗虫（或测试用户，如果您愿意）的行为，并且实时地从Web UI监视群集过程。这将有助于您在让真正的用户进入之前对您的代码进行测试和识别瓶颈。
						Locust完全基于事件，因此可以在一台机器上支持数千个并发用户。与许多其他基于事件的应用程序相比，它不使用回调。相反，它通过gevent使用轻量级过程。每个蝗虫蜂拥到你的网站实际上是在自己的进程内运行（或者是greenlet，这是正确的）。这允许您在Py​​thon中编写非常富有表现力的场景，而不会使代码与回调复杂化。
					</p>
				</div>
			</div>
			<div class="warper5 page">
				<div class="center"></div>
			</div>
		</div>
	</div>
		
	<ul>
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>